/*
** Copyright 2013 Google Inc.
**
** Licensed under the Apache License, Version 2.0 (the "License");
** you may not use this file except in compliance with the License.
** You may obtain a copy of the License at
**
**    http://www.apache.org/licenses/LICENSE-2.0
**
** Unless required by applicable law or agreed to in writing, software
** distributed under the License is distributed on an "AS IS" BASIS,
** WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
** See the License for the specific language governing permissions and
** limitations under the License.
*/

@import "peruse.styl"

no-select()
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;

html
  height: 100%
  background-color: peruse_dark

body
  height: 100%
  margin: 0
  padding: 0
  font-family: arial, sans-serif

a
  color: peruse_light

#map_canvas
  height: 100%
  width: 100%

#left-ui
  position: fixed
  bottom: 0
  left: 0
  width: 384px
  margin-left: 8px
  margin-bottom: 40px
  overflow: hidden

h2
  margin: 4px
  padding: 0px
  text-align: center
  font-size: 110%
  color: peruse_light
  no-select()

box()
  background-color: peruse_box_bg
  -webkit-border-radius: 5px
  color: peruse_light
  no-select()

item()
  width: 160px
  margin: 8px
  padding: 6px
  text-align: center
  vertical-align: middle
  display: inline-block
  no-select()
  -webkit-border-radius: 5px

list()
  margin: 0px
  padding: 0px
  no-select()

hidden()
  opacity: 0
  position: absolute
  z-index: -1
  no-select()

#activities-box
  display: block
  margin-top: 20px
  padding: 0
  box()

#activities-list
  text-align: center
  list()

#activities-list>li
  background-color: peruse_light
  border: 1px solid peruse_gray
  color: peruse_dark
  item()

#poi-box
  display: block
  margin-top: 20px
  padding: 0
  box()

.poi-list-active
  text-align: center
  list()

.poi-list-active>li
  background-color: peruse_light
  border: 1px solid peruse_gray
  color: peruse_dark
  item()

.poi-list-inactive
  hidden()

.poi-list-inactive>li
  hidden()

#poi-categories
  list()

#poi-categories>li
  background-color: peruse_dark
  border: 1px solid peruse_gray
  color: peruse_light
  font-weight: bold
  item()

#poi-categories>li a
  color: peruse_light
  font-weight: bold
  text-decoration: none

#poi-categories>li.poi-tab-active
  background-color: peruse_primary

#poi-categories>li.poi-tab-inactive
  background-color: peruse_dark

#zoom-control-box
  position: absolute
  bottom: 40px
  left: 50%
  width: 150px
  margin-left: -75px
  padding: 5px
  text-align: center
  box()

.zoom-control-button
  display: inline-block
  padding: 0px
  width: 50px
  height: 50px
  margin: 10px
  background-color: peruse_light
  color: peruse_dark
  border: 1px solid peruse_gray
  text-align: center
  vertical-align: middle
  cursor: default
  user-select: none
  -webkit-border-radius: 5px
  -webkit-touch-callout: none
  -webkit-user-select: none

#zoom-in
  font-size: 45px

#zoom-out
  font-size: 40px

